<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 数据概览卡片 -->
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><ShoppingCart /></el-icon>
              <span>今日订单</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">128</div>
            <div class="card-compare">较昨日 <span class="up">+12.5%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><Money /></el-icon>
              <span>今日销售额</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">￥25,648</div>
            <div class="card-compare">较昨日 <span class="up">+8.2%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><User /></el-icon>
              <span>新增用户</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">56</div>
            <div class="card-compare">较昨日 <span class="down">-3.1%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <el-icon><View /></el-icon>
              <span>访问量</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">1,256</div>
            <div class="card-compare">较昨日 <span class="up">+15.8%</span></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="16">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-radio-group v-model="saleTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="图表数据加载中" />
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>商品分类占比</span>
            </div>
          </template>
          <div class="chart-placeholder">
            <el-empty description="图表数据加载中" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近订单 -->
    <el-card shadow="hover" class="recent-order-card">
      <template #header>
        <div class="card-header">
          <span>最近订单</span>
          <el-button type="primary" size="small" text>查看更多</el-button>
        </div>
      </template>
      <el-table :data="recentOrders" style="width: 100%" stripe>
        <el-table-column prop="id" label="订单编号" width="180" />
        <el-table-column prop="customer" label="客户名称" width="120" />
        <el-table-column prop="amount" label="订单金额" width="120" />
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag :type="orderStatusTag(scope.row.status).type">
              {{ orderStatusTag(scope.row.status).text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="120">
          <template #default>
            <el-button type="primary" size="small" text>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 销售时间范围
const saleTimeRange = ref('week')

// 最近订单数据
const recentOrders = ref([
  {
    id: 'DD20230601001',
    customer: '张三',
    amount: '￥328.00',
    status: 'paid',
    createTime: '2023-06-01 10:23:45'
  },
  {
    id: 'DD20230601002',
    customer: '李四',
    amount: '￥528.00',
    status: 'delivered',
    createTime: '2023-06-01 11:12:32'
  },
  {
    id: 'DD20230601003',
    customer: '王五',
    amount: '￥128.50',
    status: 'completed',
    createTime: '2023-06-01 13:45:21'
  },
  {
    id: 'DD20230601004',
    customer: '赵六',
    amount: '￥1,528.00',
    status: 'pending',
    createTime: '2023-06-01 15:33:12'
  },
  {
    id: 'DD20230601005',
    customer: '钱七',
    amount: '￥328.00',
    status: 'cancelled',
    createTime: '2023-06-01 16:23:45'
  }
])

// 订单状态标签
const orderStatusTag = (status: string) => {
  const statusMap: Record<string, { type: string; text: string }> = {
    pending: { type: 'info', text: '待付款' },
    paid: { type: 'warning', text: '已付款' },
    delivered: { type: 'primary', text: '已发货' },
    completed: { type: 'success', text: '已完成' },
    cancelled: { type: 'danger', text: '已取消' }
  }
  return statusMap[status] || { type: 'info', text: '未知状态' }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .data-card {
    .card-header {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
    
    .card-content {
      text-align: center;
      
      .card-value {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 8px;
      }
      
      .card-compare {
        font-size: 14px;
        color: #909399;
        
        .up {
          color: #67c23a;
        }
        
        .down {
          color: #f56c6c;
        }
      }
    }
  }
  
  .chart-row {
    margin-top: 20px;
  }
  
  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .chart-placeholder {
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .recent-order-card {
    margin-top: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>